<template>
    <div class="sdy-cart">

      <ul class="cart">
        <li v-for="item in cartList" :key="item.proid">
          <van-checkbox @click="updateStatus(item.cartid,item.flag)" v-model="item.flag" class="select-item"></van-checkbox>
          <van-card
            class="goods-item"
            :price="item.originprice"
            desc="描述信息"
            :title="item.proname"
            :thumb="item.img1"
          >
            <template #tags>
              <van-tag plain type="primary">-</van-tag>
              <input class="num-inp" type="text" :value="item.num">
              <van-tag plain type="primary">+</van-tag>
            </template>
            <template #footer>
              <van-button size="mini">按钮</van-button>
              <van-button size="mini">按钮</van-button>
            </template>
          </van-card>
        </li>
      </ul>
  
      <div class="bottom">
        总价 : {{ totalPrice.toFixed(2) }}
      </div>
  
      <hr>
      <hr>
  
      <mygoodList></mygoodList>
  

      <van-submit-bar :price="3050" button-text="提交订单"  class="order" @click="addOrderHandler">
        <van-checkbox v-model="checkAll">全选</van-checkbox>
  </van-submit-bar>
  
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted, ref, computed } from 'vue'
  import { useRouter, type Router } from 'vue-router'
  import { Dialog } from 'vant'
  import { getCartListApi, updateStatusApi,checkAllApi } from '@/api/cart'
  import { addOrderApi } from '@/api/order'
  import { hotSearchApi } from '@/api/goods'
  import type { MyCartItem, MyHotItem } from '@/config/interface'
  import mygoodList from '@/components/home/goodList.vue'
  
  const $router: Router = useRouter()
  
  const token = window.localStorage.getItem('token')
  const user_id = window.localStorage.getItem('user_id') as string
  
  const testToken = () => {
    if (!token || !user_id) {
      Dialog({
        title: '提示',
        message: '您还没有登录'
      }).then(() => {
        $router.push({ path: '/login' })
      })
      return
    }
  }
 
  const cartList = ref<MyCartItem[]>([])
  const getCartList = async () => {
    const res = await getCartListApi(user_id as string)
    cartList.value = res.data
    console.log(res)
  }

  const goodsList = ref<MyHotItem[]>([])
  const getGoodsList = async () => {
    const res = await hotSearchApi()
    goodsList.value = res.data
  }

  // const selectAll = computed(() => {
  //   return cartList.value.every(item => item.flag)
  // })
  const totalPrice = computed(() => {
    return cartList.value.reduce((prev, item) => {
      if (item.flag) {
        return prev + (item.originprice * item.num)
      } else {
        return prev
      }
    }, 0)
  })
  const updateStatus = async (id: string, flag: boolean) => {
    const res = await updateStatusApi(id, flag)
    console.log(flag)
    if (((res as unknown) as { code: string }).code === '200') {
      getCartList()
    }
  }
  const checkAll=computed(
    {
      get(){
        return cartList.value.every(item => item.flag)
      },set(val){
        checkAllHandeler(val)
      }
    }
  )
  const checkAllHandeler = async ( flag: boolean) => {
    console.log(1111);
    console.log(user_id );
    
  console.log(flag);
  const res = await checkAllApi(user_id ,flag)
    console.log(res)
    if (((res as unknown) as { code: string }).code === '200') {
      getCartList()
    }
  }
  
  onMounted(() => {
    testToken()
    getCartList()
    getGoodsList()
  })
  const addOrderHandler = async () => {
    const res = await addOrderApi(user_id as string)
    console.log(res)
    window.localStorage.setItem('time', ((res as unknown) as { time: string }).time)
    if (((res as unknown) as { code: string }).code === '200') {
      $router.push('/order')
    }
   
  }
  
  </script>
  
  <style scoped lang="scss">
  .cart {
  
    li {
      display: flex;
      box-sizing: border-box;
      padding: 0 10px;
  
      > .select-item {
        width: 30px;
      }
  
      > .goods-item {
        flex: 1;
      }
    }
  }
  
  .num-inp {
    width: 30px;
    text-align: center;
    margin: 0 10px;
  
  }
  
  .order{
    position: fixed;
    bottom: 50px;
  }
  </style>
 